<include file="public@header"/>
</head>
<body>
    <div class="wrap">
        <ul class="nav nav-tabs slider">
            <volist name="countryData" id="vo">
                <li <if condition="$vo.id eq $langId"> class="active" </if> ><a href="#" data-toggle="tab" data-id="{$vo.id}">{$vo.name}</a></li>
            </volist>
        </ul>
        <form class="form-horizontal js-ajax-form margin-top-20" role="form" action="{:url('langData/saveData')}" method="post">
            <table class="table table-hover table-bordered">
                <thead id="theadDiv"></thead>
                <tbody id="tbodyDiv"></tbody>
            </table>
            <input type="hidden" name="langId" value="{$langId}">
            <div class="form-group-bottom center-block">
                <button type="button" id="addFlag" class="btn btn-primary" onclick="addOne()">&emsp;添加一行&emsp;</button>
                <button type="submit" class="btn btn-primary js-ajax-submit">&emsp;保存&emsp;</button>
            </div>
        </form>
    </div>
    <script type="text/javascript" src="__STATIC__/js/admin.js"></script>
    <script type="text/javascript">
        var defaultLangId = '{$defaultLangId}',
            langId = '{$langId}',
            langName = '{$langName}';
        (function(){
            $('li a').click(function () {
                window.location.href = '{:url("/admin/langData/index")}?langId=' + $(this).data('id');;
                langId = $(this).data('id');
            });
            if (defaultLangId === langId){
                initTableThead(langName);
                $('#addFlag').show();
            }else {
                initTableThead(langName);
                $('#addFlag').hide();
            }

            $.get("{:url('/admin/langData/getData')}?langId=" + langId, {}, function (res){
                if (res.code === 0) {
                    var html = '';
                    if (defaultLangId == langId) {
                        for (var i=0;i < res.data.length; ++i) {
                            var obj = res.data[i];
                            html += '<tr>';
                            html += '<td style="width: 40%"><input type="text" name="type[]" value="'+ obj.type +'" class="form-control" /></td>';
                            html += '<td style="width: 40%"><input type="text" name="value[]" value="'+ obj.value +'" class="form-control" /></td>';
                            html += '<input type="hidden" name="id[]" value="'+ obj.id +'" />';
                            html += '</tr>';
                        }
                    }else {
                        for (var i=0;i < res.data.length; ++i) {
                            var obj = res.data[i];
                            html += '<tr>';
                            html += '<td style="width: 40%"><input type="text" name="type[]" value="'+ obj.type +'" class="form-control" /></td>';
                            html += '<td style="width: 40%"><input type="text" name="value[]" value="'+ obj.value +'" class="form-control" /></td>';
                            html += '<td style="width: 20%">'+ obj.title+'</td>';
                            html += '<input type="hidden" name="id[]" value="'+ obj.id +'" />';
                            html += '</tr>';
                        }
                    }
                    $('#tbodyDiv').html(html);
                }
            },'JSON');
        })()

        function initTableThead(langName) {
            var theadStr = '';
            if (defaultLangId == langId) {
                theadStr = '<tr><th>键</th><th>中文简体</th></tr>';
            }else {
                theadStr = '<tr><th>键</th><th>'+ langName +'</th><th>中文简体</th></tr>';
            }
            $('#theadDiv').html(theadStr);
        }

        function addOne() {
            var str = '<tr>';
            str += '<td style="width: 40%"><input type="text" name="type[]" class="form-control" /></td>';
            str += '<td style="width: 40%"><input type="text" name="value[]" class="form-control" /></td>';
            str += '<input type="hidden" name="id[]" value="0" />';
            str += '</tr>';
            $('#tbodyDiv').append(str);
        }
    </script>
</body>
</html>